/*
学习目标：通过React基础知识，实现路径切换，界面切换
  1. 声明一个状态保存路径
  2. 逻辑判断，条件渲染
  3. 监听路由变化，存储状态 (window原生事件 hashchange )

  #/开头的就是一个哈希路由
 */

import React from 'react';
import ReactDom from 'react-dom/client';

class Handler extends React.Component {
  state = {
    currentUrl: '/Home',
  };

  componentDidMount() {
    window.addEventListener('hashchange', () => {
      console.log('window.location----->', window.location);
      this.setState({
        currentUrl: window.location.hash.slice(1),
      });
    });
  }

  render() {
    const { currentUrl } = this.state;
    return (
      <div>
        <ul>
          <li>
            <a href="#/Home">首页</a>
          </li>
          <li>
            <a href="#/My">我的</a>
          </li>
          <li>
            <a href="#/Friend">朋友</a>
          </li>
        </ul>

        {currentUrl === '/Home' && <Home></Home>}
        {currentUrl === '/My' && <My></My>}
        {currentUrl === '/Friend' && <Friend></Friend>}
      </div>
    );
  }
}

function Home() {
  return (
    <div>
      <h1>我是Home组件</h1>
    </div>
  );
}
function My() {
  return (
    <div>
      <h1>我是My组件</h1>
    </div>
  );
}
function Friend() {
  return (
    <div>
      <h1>我是Friend组件</h1>
    </div>
  );
}

// 18版本以上新出的挂载方法
const root = ReactDom.createRoot(document.getElementById('root'));
root.render(<Handler></Handler>);
